<template>
  <div>
    <div v-for="chat in chatHistory" :key="chat.id">
      <p>{{ chat.message }}</p>
      <p>{{ chat.response }}</p>
    </div>
    <el-input
      v-model="newMessage"
      placeholder="请输入"
      @keydown.enter="sendMessage"
    ></el-input>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { getChatGPT } from '@/api/chatGPT';
interface History {
  id: number;
  message: string;
  response: string;
}

export default defineComponent({
  setup() {
    const chatHistory = ref<History[]>([]);
    const newMessage = ref('');
    const sendMessage = async () => {
      const message = newMessage.value.trim();
      if (message) {
        chatHistory.value.push({
          id: chatHistory.value.length + 1,
          message,
          response: '',
        });
        newMessage.value = '';
        const response = await getChatGPT(message);
        chatHistory.value[chatHistory.value.length - 1].response = response;
      }
    };
    return {
      chatHistory,
      newMessage,
      sendMessage,
    };
  },
});
</script>

<style scoped></style>
